<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{margin: 0;padding: 0;list-style: none;}
			#lunbo{width:90%;margin:0 auto;position: relative;}
			ul{width: 100%;}
			ul li{display: none;position: relative;position: relative;}
			ul li img{width:100%;position: absolute;}
			.left{width: 50px;height: 50px;position: absolute;left: 0;top:200px;font-size:50px;color: #fff;}
			.right{width: 50px;height: 50px;position: absolute;right: 0;top: 200px;font-size:50px;color: #fff;}
		</style>
		<script src="jquery-2.1.4.min.js"></script>
	</head>
	<body>
		<div id="lunbo">
			<ul>
				<li style="display:block;"><img src="img/5a387848N03d48f68.jpg"/></li>
				<li><img src="img/5a3a924aN24661191.jpg"/></li>
				<li><img src="img/5a3b6331N5d84605d.jpg"/></li>
				<li><img src="img/5a3c5f5cN01b6d783.jpg"/></li>
				<li><img src="img/5a3c82f2N40ffa18f.jpg"/></li>
				<li><img src="img/5a387848N03d48f68.jpg"/></li>
			</ul>
			<span class="left"><</span>
			<span class="right">></span>
		</div>
	</body>
	<script type="text/javascript">
		var num=0;
		var timer=null;
			timer=setInterval(fun,1000)
			$("#lunbo").hover(function(){
				clearInterval(timer)
			},function(){
				timer=setInterval(fun,1000)
			})
			function fun(){
				$("li").eq(num).stop().fadeOut(1000);
				num++;
				if(num>=5){
					num=0;
				}
				$("li").eq(num).stop().fadeIn(1000)
			}
			$(".left").click(function(){
				$("li").eq(num).fadeOut(1000)
				num--;
				if(num<0){
					num=5
				}
				$("li").eq(num).fadeIn(1000)
			})
			$(".right").click(function(){
				fun();
			})
	</script>
</html>
